<template>
    <div class="home">
        <div class="header">
          <img src="../assets/img/dd.png" alt="">
          <h2>个人中心</h2>
          <img src="../assets/img/ll.png" alt="" @click="logout">
        </div>
        <div class="bottom">
          <div class="user_photo">
            <img src="../assets/img/user_photo.jpg" alt="">
          </div>
          <div class="user">
            <div class="user_name">
              姓名：洛神鬼殇
            </div>
            <div class="user_level">
              Lv.1
            </div>
          </div>
          <div class="user_email">
            账号：{{ email }}
          </div>
          <div class="user_password">
            密码：{{ password }}
          </div>
          <div class="nums">
            <div>
              <span>0</span>
              <p>徽章</p>
            </div>
            <div>
              <span>0</span>
              <p>关注</p>
            </div>
            <div>
              <span>0</span>
              <p>粉丝</p>
            </div>
          </div>
          <div class="images">
            <img src="../assets/img/刀.png" alt="">
            <img src="../assets/img/勺子.png" alt="">
            <img src="../assets/img/叉.png" alt="">
            <img src="../assets/img/杯子.png" alt="">
            <img src="../assets/img/碗.png" alt="">
            <img src="../assets/img/筷子.png" alt="">
            <img src="../assets/img/铲.png" alt="">
          </div>
        </div>
    </div>
</template>

<script>
import { Dialog } from 'vant';
let user = localStorage.getItem("SKY_USERS");
user = JSON.parse(user);
// console.log(user);
export default {
  data() {
    return {
      email:user[0].username,
      password:user[0].password
    }
  },
  // 访问这个组件之前的钩子函数
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    // 获取token
    let token = localStorage.getItem("AUTO_TOKEN");
    console.log(token);
    // 判断是有值
    if (token) {
      next(true);
    }
    else {
      Dialog.confirm({
        title: '您还没登录',
        message: '要跳转到登录页面吗?',
      })
      .then(() => {
        // on confirm （确定）
        next({ path: '/login' })
      })
      .catch(() => {
        // on cancel （取消）
        next(false);
      });
    }
  },
  methods: {
    // 退出登录
    logout(){
         // 先给用户做弹窗反馈
         Dialog.confirm({
            confirmButtonColor: "#ec344e",
            message: '您要退出登录吗',
            title: "提示",
         })
         .then(() => {
            // on close
            localStorage.removeItem("AUTO_TOKEN");
            setTimeout(()=> {
              // 跳转登录页
              this.$router.push({ path: '/login' })
            },150)
        })
        .catch(
           err=> {
            console.log(err);
           }
        )
    }
  },
}
</script>

<style lang="less">
@import '../common/less/varible.less';
  .home{
    width: 100%;
    font-family: cmff;
    .header{
      display: flex;
      margin-top: 10px;
      margin-left: 15px;
      margin-right: 15px;
      justify-content: space-around;
      img{
        width: 40px;
      }

      h2{
        font-size: 40px;
        color: @Color;
      }
    }
    .bottom{
      width: 100%;
      .user_photo{
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 50px;
        img{
          width: 150px;
          border-radius: 50%;
          border: 3px solid black;
        }
      }
      .user{
        display: flex;
        margin-top: 30px;
        .user_name{
          margin-left: 60px;
        }
        .user_level{
          margin-left: 10px;
        }
      }
      .user_email{
        margin-top: 20px;
        margin-left: 60px;
      }
      .user_password{
        margin-top: 20px;
        margin-left: 60px;
      }
      .nums{
        display: flex;
        margin-top: 50px;
        justify-content: space-around;
        div{
          text-align: center;
          span{
            color: @Color;
            font-size: 30px;
          }
          p{
            margin-top: 5px;
            font-size: 24px;
          }
        }
      }
      .images{
        margin-top: 60px;
        display: flex;
        justify-content: space-around;
        img{
          width: 30px;
        }
      }
    }
  }
</style>